<template>
    <div class="alert-container rr-ignore">
        <div class="body-wrapper">
            <div class="content-wrapper">
                <div class="content">{{ content }}</div>
            </div>
            <div class="divider"></div>
            <div class="button-wrapper">
                <div class="button confirm" @click="handleConfirm">
                    {{ confirmButtonText }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
	components: {},
	props: {
		isVisible: {
			type: Boolean,
			default: false
		},
		content: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: ''
		},
		confirmButtonText: {
			type: String,
			default: '确定'
		},
		onConfirm: {
			type: Function,
			default: function () {
				return;
			}
		}
	},
	data() {
		return {};
	},
	mounted() {},
	beforeDestroy() {},
	methods: {
		handleConfirm(event) {
			event.preventDefault();
			event.stopPropagation();
			this.onConfirm(this.type);
		}
	}
};
</script>

<style scoped>
.alert-container {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    z-index: 999999999;
    pointer-events: auto;
    position: absolute;
    top:0px;
}
.body-wrapper {
    height: 180px;
    background: #fff;
    width: 260px;
    border-radius: 5px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    font-size: 14px;
    pointer-events: auto;
}
.content-wrapper {
    padding: 10px 20px;
    text-align: center;
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content {
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    line-height: 28px;
}
.button-wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 50px;
    line-height: 50px;
}
.button-wrapper .button {
    margin: 0px 20px;
    width: 70px;
    height: 30px;
    line-height: 30px;
    border-radius: 3px;
    cursor: pointer;
}

.button-wrapper .confirm {
    font-size: 14px;
    font-weight: 400;
    color: #DE0112;;
}
.divider {
    width: 100%;
    height: 1px;
    background: #eeeeee;
}
</style>
